<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-form inline size="small" @submit.native.prevent>
        <el-form-item label="年度" prop="year">
          <el-select v-model="year" placeholder="年度" style="width: 100%">
            <el-option
              v-for="(item,index) in yearList"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关键词：">
          <el-input v-model="listPram.name" placeholder="请输入人员姓名" clearable class="selWidth"/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" type="primary" @click="handleSearch">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
<!--        <el-form-item class="el-form-item-align-right">-->
<!--          <el-button icon="el-icon-circle-plus" size="mini" type="primary" @click="handlerOpenInfo(0)" v-hasPermi="['admin:person:train:save']">添加军事训练综合评定</el-button>-->
<!--        </el-form-item>-->
      </el-form>
      <el-table :data="listData.list" v-loading="loading" size="mini" :header-cell-style=" {fontWeight:'bold',background:'#f8f8f9',color: '#515a6e',height:'40px'}" border>
        <el-table-column
          prop="serialNumber"
          label="序号"
          width="50"
        />
        <el-table-column label="人员" prop="name" min-width="120"/>
        <el-table-column label="工作单位及职务" prop="positionDesc" min-width="230">
          <template slot-scope="scope" v-if="scope.row.positionDesc">
            <el-tag size="small" type="info" v-for="(item, index) in scope.row.positionDesc.split(',')" :key="index" class="mr5">{{ scope.row.departmentText }}{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="gender" min-width="120"/>
        <el-table-column label="总成绩" prop="trainDescText" min-width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.trainDescText | filterEmpty }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="130"  fixed="right">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="mini" @click="handlerOpenInfo(1,scope.row)" v-hasPermi="['admin:person:train:info']">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listPram.page"
        :page-sizes="constants.page.limit"
        :layout="constants.page.layout"
        :total="listData.count"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      :visible.sync="infoDialogConfig.visible"
      :title="infoDialogConfig.isCreate === 0? '个人军事训练综合评定':'个人军事训练综合评定'"
      destroy-on-close
      :close-on-click-modal="false"
      :append-to-body="true"
      width="800px"
    >
      <info
        v-if="infoDialogConfig.visible"
        :is-create="infoDialogConfig.isCreate"
        :edit-data="infoDialogConfig.editData"
        :all-category-data="categoryData"
        :all-year="listPram.year"
        @hideInfoDialog="hideInfoDialog"
        @assignInfoEditAndHideInfoDialog="assignInfoEditAndHideInfoDialog"
      />
    </el-dialog>
  </div>
</template>

<script>
import * as personApi from '@/api/person.js'
import * as roleApi from '@/api/role.js'
import info from './info'
import { checkPermi } from "@/utils/permission";
import * as selfUtil from "@/utils/ZBKJIutil";
import * as categoryApi from "@/api/categoryApi"; // 权限判断函数
export default {
  // name: "index"
  components: { info },
  data() {
    return {
      constants:this.$constants,
      loading:false,
      listData: { list: [] },
      listPram: {
        year:null,
        name: '',
        page: 1,
        limit: this.$constants.page.limit[0]
      },
      infoDialogConfig: {
        visible: false,
        isCreate: 0, // 0=创建，1=编辑
        editData: {}
      },
      personList:[],
      categoryData:{},
      yearList:[],
      year:null,
    }
  },
  mounted() {
    this.initYearList()
    this.initCategoryData()
    this.handleGetTrainList()
  },
  methods: {
    checkPermi,
    initYearList(){
      let date = new Date()
      let year = date.getFullYear()
      for (let i=0;i<10;i++){
        this.yearList.push(year - i)
      }
      this.year = year
      this.listPram.year = year
    },
    initCategoryData(){
      this.loading = true

      categoryApi.categoryTrainList().then(data => {
        this.categoryData = data
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },

    handleSearch() {
      this.listPram.year = this.year
      this.listPram.page = 1
      this.handleGetTrainList()
    },
    handleSizeChange(val) {
      this.listPram.year = this.year
      this.listPram.limit = val
      this.handleGetTrainList()
    },
    handleCurrentChange(val) {
      this.listPram.year = this.year
      this.listPram.page = val
      this.handleGetTrainList()
    },
    resetQuery(){
      let date = new Date()
      let year = date.getFullYear()

      this.year = year
      this.listPram.year = year;
      this.listPram.name = '';
      this.handleGetTrainList()
    },

    handleGetTrainList() {
      personApi.personTrainList( this.listPram ).then(data => {
        this.listData = data
      })
    },

    // 军事训练dialog
    handlerOpenInfo(isCreate, editDate) {
      this.infoDialogConfig.editData = editDate
      this.infoDialogConfig.isCreate = isCreate
      this.infoDialogConfig.visible = true
    },
    hideInfoDialog() {
      this.infoDialogConfig.visible = false
    },
    assignInfoEditAndHideInfoDialog() {
      setTimeout(() => {
        this.infoDialogConfig.visible = false
        this.handleGetTrainList()
      }, 200);
    },
  }
}
</script>

<style scoped>

</style>
